<template>
  <div class="content">
    <button @click="random">random</button>
    <transition-group class="wraps" tag="div" move-class="move">
      <div class="item" v-for="(item, index) in list" :key="item.id">{{ item.number }}</div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import _ from "lodash"   // 提示错误时 需要安装 @types/lodash   npm i @types/lodash -D
import "animate.css"

const list = ref<number[]>(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
  return {
    id: index,
    number: (index % 9) + 1
  }
}))

const random = () => {
  list.value = _.shuffle(list.value)
}

</script>

<style lang="less" scoped>
  .wraps {
    display: flex;
    flex-wrap: wrap;
    width: calc(24px * 9);
    .item {
      width: 24px;
      height: 24px;
      border: 1px solid #ddd;
    }
  }

  .move {
    transition: all 1s;
  }
</style>